import {
  cadAppLog,
  CMEVENTS
} from '@amcax/base'
import {
  userEvents
} from '@app-cad/module';
import {
  Card,
  CardContent,
  FormControl,
  FormControlLabel,
  FormGroup,
  Slider,
  styled,
} from '@mui/material';
import { useEffect, useRef, useState } from 'react';
import ColorPicker from './ColorPicker';
import { materialSetter } from './MaterialSetter';
import { MaterialParams } from './types';

const StyledFormGroup = styled(FormGroup)(() => ({
  paddingTop: '10px',
  '.MuiFormControl-root': {
    width: '95%',
  },
  '.MuiFormControlLabel-root': {
    marginRight: 0,
    '.MuiFormControlLabel-label': {
      width: '30%',
      fontSize: '14px',
    },
    '.MuiInputBase-formControl': {
      width: '70%',
      paddingLeft: '0px',
    },
  },
}));

export default function MaterialSetting({
  show,
  dxid,
  materials,
  faceIndex,
}: MaterialParams) {
  const materialRef = useRef(null);
  // const [isEmpty, setIsEmpty] = useState(false)
  const [color, setColor] = useState('#fff');
  const [texture, setTexture] = useState('');
  const [ambient, setAmbient] = useState('#fff');
  const [diffuse, setDiffuse] = useState('#fff');
  const [emissive, setEmissive] = useState('#fff');
  const [specular, setSpecular] = useState('#fff');
  const [shininess, setShininess] = useState(0.2);
  const [transparency, setTransparency] = useState(0.0);

  useEffect(() => {
    cadAppLog('MaterialSetting', show, dxid, materials, faceIndex);
    registerEvents();
  }, []);

  useEffect(() => {
    updateMaterials();
  }, [
    color,
    texture,
    ambient,
    diffuse,
    emissive,
    specular,
    shininess,
    transparency,
  ]);

  const registerEvents = () => {
    userEvents.on(CMEVENTS.MATERIAL_SELECTED, (material: any) => {
      if (material) {
        materialRef.current = material;
        setColor(material.color);
        setTexture(material.texture);
        setAmbient(material.ambient);
        setDiffuse(material.diffuse);
        setEmissive(material.emissive);
        setSpecular(material.specular);
        setShininess(material.shininess);
        setTransparency(material.transparency);
      }
    });
  };

  const updateMaterials = async () => {
    if (!materialRef.current) return;
    const material = materialRef.current;
    material.color = color;
    material.texture = texture;
    material.ambient = ambient;
    material.diffuse = diffuse;
    material.emissive = emissive;
    material.specular = specular;
    material.shininess = shininess;
    material.transparency = transparency;
    // await wsApi.editMaterials(material)
    materialSetter.editMaterial(material);
    userEvents.emit(CMEVENTS.MATERIAL_UPDATED, material);
  };

  return (
    <Card variant='outlined'>
      <CardContent>
        {show ? (
          <StyledFormGroup>
            <FormControl variant='filled'>
              <FormControlLabel
                sx={{ ml: 0 }}
                label='基础色'
                labelPlacement='start'
                control={
                  <ColorPicker
                    color={color}
                    onColorChange={setColor}
                  />
                }
              />
            </FormControl>
            {/* 
        <FormControl variant="filled">
          <FormControlLabel
            sx={{ ml: 0 }}
            label="纹理"
            labelPlacement='start'
            control={<ColorPicker color={color} onColorChange={handleColorChange} />}
          />
        </FormControl>
         */}
            <FormControl variant='filled'>
              <FormControlLabel
                sx={{ ml: 0 }}
                label='环境色'
                labelPlacement='start'
                control={
                  <ColorPicker
                    color={ambient}
                    onColorChange={setAmbient}
                  />
                }
              />
            </FormControl>
            <FormControl variant='filled'>
              <FormControlLabel
                sx={{ ml: 0 }}
                label='漫反射'
                labelPlacement='start'
                control={
                  <ColorPicker
                    color={diffuse}
                    onColorChange={setDiffuse}
                  />
                }
              />
            </FormControl>
            <FormControl variant='filled'>
              <FormControlLabel
                sx={{ ml: 0 }}
                label='自发光'
                labelPlacement='start'
                control={
                  <ColorPicker
                    color={emissive}
                    onColorChange={setEmissive}
                  />
                }
              />
            </FormControl>
            <FormControl variant='filled'>
              <FormControlLabel
                sx={{ ml: 0 }}
                label='高光色'
                labelPlacement='start'
                control={
                  <ColorPicker
                    color={specular}
                    onColorChange={setSpecular}
                  />
                }
              />
            </FormControl>
            <FormControl variant='filled'>
              <FormControlLabel
                sx={{ ml: 0 }}
                label='亮度'
                labelPlacement='start'
                control={
                  <Slider
                    valueLabelDisplay='auto'
                    defaultValue={shininess}
                    step={0.1}
                    min={0}
                    max={1}
                    onChange={(e, value) => setShininess(value as number)}
                  />
                }
              />
            </FormControl>
            <FormControl variant='filled'>
              <FormControlLabel
                sx={{ ml: 0 }}
                label='透明度'
                labelPlacement='start'
                control={
                  <Slider
                    valueLabelDisplay='auto'
                    defaultValue={0}
                    value={transparency}
                    step={0.1}
                    min={0}
                    max={1}
                    onChangeCommitted={(e, value) =>
                      setTransparency(value as number)
                    }
                  />
                }
              />
            </FormControl>
          </StyledFormGroup>
        ) : (
          <></>
        )}
      </CardContent>
    </Card>
  );
}
